<template>
  <div class="myInfo-con">

    <el-table
    :data="myAccount"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="邮箱">
            <span>{{ props.username}}</span>
          </el-form-item>
          <el-form-item label="电话">
            <span>{{ props.phone}}</span>
          </el-form-item>
          <el-form-item label="账户">
            <span></span>
          </el-form-item>
          <el-form-item label="权限">
            <span>{{ props.role}}</span>
          </el-form-item>
          <el-form-item label="账号状态">
            <span>{{ props.status}}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="邮箱" prop="username">
    </el-table-column>
    <el-table-column label="电话" prop="phone">
    </el-table-column>
    <el-table-column label="角色" prop="role" :formatter="formatRole">
    </el-table-column>
    <el-table-column label="账号状态" prop="status" :formatter="formatStatus">
    </el-table-column>
    <el-table-column label="实名">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" icon="el-icon-user" @click="openAccount(scope.row)">实名</el-button>
      </template>
    </el-table-column>
    <el-table-column label="开户">
      <template slot-scope="scope">
        <el-button type="warning" size="mini" icon="el-icon-setting" @click="openAccount(scope.row)">开户</el-button>
      </template>
    </el-table-column>
    <el-table-column label="消户">
      <template slot-scope="scope">
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="openAccount(scope.row)">消户</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
    tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }],
      myAccount:[]
    }
  },
  methods:{
    // 用户权限显示转换
    formatRole: function(row, column) {
      // 如果没有填，默认普通用户
      return row.role === 'admin' ? '管理员' : row.role === 'normal' ? '普通用户' : '管理员'
    },
    formatStatus: function(row, column) {
      return row.status === 1 ? '已激活' : row.status === 0 ? '被冻结' : '已激活'
    },
    openAccount(param){

    },
    getMyAccount(){
      this.myAccount.push(this.$store.state.account)
    }
  },
  created() {
    this.getMyAccount()
  }
}
</script>

<style>
  .myInfo-con {
    margin:10px 30px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
